<template>
   
    <!-- App -->
    <div >
      <!-- 全局引入TinyMCE -->
      
        <vue-tinymce
            v-model="content"
            :setup="setup"
            :setting="setting" />
    </div>
</template>
<script src="//unpkg.com/tinymce@5.1.5/tinymce.min.js"></script>
<script>

  export default {
    // name: 'codemirror-example-vue',
    // title: 'Mode: text/x-vue & Theme: base16-dark',
    // components: {
    //   codemirror
    // },
    data() {
      return {
        content: "<p>html content</p>",
                setting: {
                    height: 500
                },
        code: dedent`
          <html>
<body>
    <div>
        <p>示例</p>
        <p>字符串</p>

        <p>循环示例</p>
        <table>
            #foreach($item in $data.list)
                #if($velocityCount==1)
                    <tr>
                        <th>if示例</th>
                        <th>if示例</th>
                        <th>if示例</th>
                    </tr>
                #end
                <tr>
                    <td>$velocityCount</td>
                    <td>$item.name</td>
                    <td>$item.age</td>
                </tr>
            #end
        </table>
        #if($data.flag)
            <p>data.flag为true</p>
        #elseif($data.flag2)
            <p>data.flag2为true</p>
        #else
            <p>都不存在</p>
        #end
    </div>
</body>
</html>

        `,
        cmOption: {
          tabSize: 4,
          foldGutter: true,
          styleActiveLine: true,
          lineNumbers: true,
          line: true,
          keyMap: "sublime",
          mode: 'text/vue',
          theme: 'base16-dark',
          extraKeys: {
            'F11'(cm) {
              cm.setOption("fullScreen", !cm.getOption("fullScreen"))
            },
            'Esc'(cm) {
              if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false)
            }
          }
        }
      }
    },
    methods: {
      setup(editor) {
                console.log(editor)
            },
      onCmCursorActivity(codemirror) {
        console.debug('onCmCursorActivity', codemirror)
      },
      onCmReady(codemirror) {
        console.debug('onCmReady', codemirror)
      },
      onCmFocus(codemirror) {
        console.debug('onCmFocus', codemirror)
      },
      onCmBlur(codemirror) {
        console.debug('onCmBlur', codemirror)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .example {
    display: flex;
    height: 100%;
    .codemirror,
    .pre {
      width: 50%;
      height: 100%;
      margin: 0;
      overflow: auto;
    }
    .pre {
      display: block;
      padding: 1rem;
      font-size: 16px;
      line-height: 1.6;
      word-break: break-all;
      word-wrap: break-word;
    }
  }
</style>